import React, { Component } from 'react'
import './index.css'
import PropTypes from 'prop-types'

class Item extends Component {

    state = {
        // 控制鼠标移入移出
        mouse: false
    }

    static propTypes = {
        upDateTodo: PropTypes.func.isRequired,
        deleteTodo: PropTypes.func.isRequired,
        todoName: PropTypes.string.isRequired,
        id: PropTypes.string.isRequired,
        done: PropTypes.bool.isRequired,
    }

    render() {
        const {id, todoName, done} = this.props
        const {mouse} = this.state
        return (
            <li style={{
                background: mouse ? '#eee' : '#FFF'
            }} onMouseEnter={() => {
                this.handleMouse(true)
            }} onMouseLeave={() => {
                this.handleMouse(false)
            }}>
                <label>
                    <input onChange={this.handleCheck(id)} checked={done} type="checkbox"/>
                    <span>{todoName}</span>
                </label>
                <button onClick={this.handleDelete(id)} className="btn btn-danger" style={{
                    display: mouse ? 'block' : 'none',
                }}>删除
                </button>
            </li>
        )
    }

    handleMouse = (flag) => {
        // 为true为鼠标移入 为false为鼠标移出
        this.setState({
            mouse: flag
        })
    }

    handleCheck = (id) => {
        return (e) => {
            const {target} = e
            // console.log(target.checked)
            // console.log(id)
            this.props.upDateTodo(id, target.checked)
        }
    }

    handleDelete = (id) => {
        return () => {
            this.props.deleteTodo(id)
        }
    }
}

export default Item
